{% extends "base.html" %}
{% load wagtailimages_tags wagtailcore_tags %}

{% block content %}
<div class="homepage">
    {% if page.home_carousel %}
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          {% for carousel in page.home_carousel.all %}
          <li data-target="#carousel-example-generic" data-slide-to="{{forloop.counter0}}" {% if forloop.counter < 2 %}class="active"{% endif %}></button>
            {% endfor %}
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            {% for carousel in page.home_carousel.all %}
            {% image carousel.image fill-1920x600 as image %}
            <div class="item {% if forloop.counter < 2 %}active{% endif %}" >
                <img src="{{ image.url }}" alt="">
                <div class="carousel-caption">
<!--                        <h1>{{carousel.title}}</h1>-->
<!--                        <p>{{carousel.introduction}}</p>-->
<!--                        <p>-->
<!--                        {% if carousel.url %}-->
<!--                        <a class="btn btn-lg btn-primary" href="{% pageurl carousel.url %}">-->
<!--                            查看更多详情-->
<!--                        </a>-->
<!--                        {% else %}-->
<!--                        {% endif %}-->
<!--                        </p>-->
                </div>
            </div>
          {% endfor %}
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    {% endif %}

    <div class="container">
        <div class="row promo-row">
            <div class="featured-cards col-sm-5 col-sm-offset-1">
                {% if page.fs_1 %}
                <h2 class="featured-cards__title">{{ page.fs_1_title }}</h2>
                <ul class="featured-cards__list">
                    {% for childpage in page.fs_1.specific.children|slice:"3" %}
                    <li>
                        {% include "includes/card/listing-card.html" with page=childpage %}
                    </li>
                    {% endfor %}
                </ul>
                <a class="featured-cards__link" href="/products">
                    <span>查看更多产品</span>
                    {% include "includes/chevron-icon.html" with class="featured-cards__chevron-icon" %}
                </a>
                {% endif %}
            </div>

            <div class="col-sm-6 promo">
                {% if page.promo_image or page.promo_title or page.promo_text %}
                <div class="col-lg-10 promo-text">
                    {% if page.promo_title %}
                    <h2>{{ page.promo_title }}</h2>
                    {% endif %}
                    {% if page.promo_text %}
                    {{ page.promo_text|richtext }}
                    {% endif %}
                </div>
                {% endif %}
                {% if page.promo_image %}
                <figure>{% image page.promo_image fill-590x413-c100 %}</figure>
                {% endif %}
            </div>
        </div>
    </div>

    {% if page.body %}
    <div class="container-fluid streamfield">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 streamfield-column">
                {{ page.body }}
            </div>
        </div>
    </div>
    {% endif %}

    <div class="container">
        <div class="row">
            <div class="col-md-12 locations-section">
                {% if page.fs_2 %}
                <h2 class="locations-section__title">{{ page.fs_2_title }}</h2>
                {% for childpage in page.fs_2.specific.children|slice:"3" %}
                {% include "includes/card/location-card.html" with page=childpage %}
                {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
    {% if page.fs_3 %}
    <div class="blog-section__background">
        <div class="container">
            <div class="row">
                <div class="col-md-12 blog-section">
                    <h2 class="blog-section__title">{{ page.fs_3_title }}</h2>
                    <div class="blog-section__grid">
                        {% for childpage in page.fs_3.specific.children|slice:"6" %}
                        {% include "includes/card/picture-card.html" with page=childpage portrait=True %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock content %}